<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Home</title>
<link href="resources/scripts/css/flexigride/flexigrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/scripts/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="resources/scripts/js/flexigrid/flexigrid.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#table').flexigrid({
		url: 'showCityByPage',
		method: 'POST',
		dataType: 'json',
		colModel: [
		    {display: 'ID', name: 'id', sortable : true, align: 'left'},
		    {display: 'Name', name: 'name', sortable : true, align: 'left'},
		    {display: 'CountryCode', name: 'countryCode', sortable : true, align: 'left'},
		    {display: 'District', name: 'district', sortable : true, align: 'left'},
		    {display: 'Population', name: 'population', sortable : true, align: 'left'},
			],
		searchitems: [
		    {display: 'ID', name: 'id'},
		    {display: 'Name', name: 'name', isdefault: true},
		    {display: 'CountryCode', name: 'countryCode'},
		    {display: 'District', name: 'district'},
		    {display: 'Population', name: 'population'},
		    ],
		sortname: "id",
		sortorder: "ASC",
		usepager: true,
		title: 'Countries',
		useRp: true,
		rp: 15,
		showTableToggleBtn: true,
		width: 700,
		height: 'auto'
	});
});
</script>
</head>
<body>
<h1>
	Hello world!  
</h1>

<P>  The time on the server is ${serverTime}. </P><hr />
<table id="table" style="display:none"></table>
</body>
</html>
